<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/plugins/elementui/index.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin" id="app">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    {{this.studentInfo.username}}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item layui-nav-itemed"></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">发布商品</a></li>
                <li class="layui-nav-item layui-nav-itemed"><a href="">考勤打卡</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <!--            打卡和搜索栏-->
            <div>
                <div class="block">
                    <el-button type="primary" lay-size="small" @click="checkWork">打卡</el-button>
<!--                        <el-button type="primary" lay-size="small" @click="checkWork(2)">下午打卡</el-button>-->
<!--                        <el-button type="primary" lay-size="small" @click="checkWork(3)">晚自习打卡</el-button>-->
                    &nbsp&nbsp
                    <el-date-picker
                            v-model="studentPageDTO.checkTimes"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                    &nbsp&nbsp
                    <el-button type="primary" lay-size="small" @click="getStudentCheckWorkInfo">搜索</el-button>
                </div>
            </div>
            <br><br>
            <!--            表格-->
            <div>
                <el-table :data="studentPageVo" size="small" current-row-key="id" stripe border style="width: 100%"
                          highlight-current-row slot="empty">">
                    <el-table-column prop="checktime" label="打卡时间" align="center">
                    </el-table-column>
                    <el-table-column prop="checkstatus" label="考勤时段" align="center">
                        <tamplate slot-scope="scope">
                            <span v-if="scope.row.checkstatus == 1">
                                 <span>上午</span>
                            </span>
                            <span v-else-if="scope.row.checkstatus == 2">
                            <span>下午</span>
                            </span>
                            <span v-else>晚上</span>
                        </tamplate>
                    </el-table-column>
                    <el-table-column prop="checkresult" label="考勤结果" align="center">
                        <tamplate slot-scope="scope">
                            <span v-if="scope.row.checkresult == 0">
                                 <span style="color: green">正常</span>
                             </span>
                            <span v-else style="color: red">迟到</span>
                        </tamplate>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <br><br>
            <div class="pagination">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                               :current-page="studentPageVo.page"
                               :page-size="studentPageVo.pageSize" :page-sizes="pageSizes" :total="total"
                               @size-change="handleSizeChange"
                               @current-change="handlePageChange" align="center"/>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/js/vue.js"></script>
<script src="/plugins/elementui/index.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            studentInfo: {},
            StudentCheckWorkDTO: {
                // checkType: '',
                checkTime: '',
                username: '',
            },
            studentPageDTO:
                {
                    pageNum: 1,
                    pageSize: 10,
                    checkTimes:[],//打卡时间
                }
            ,
            studentPageVo: [],
            // 分页
            total: 0,
            // 总记录数
            pageSizes: [2, 5, 10],
        },
        methods: {
            //打卡
            checkWork(type) {
                const now = new Date();
                const year = now.getFullYear();
                const month = ('0' + (now.getMonth() + 1)).slice(-2);
                const day = ('0' + now.getDate()).slice(-2);
                const hours = ('0' + now.getHours()).slice(-2);
                const minutes = ('0' + now.getMinutes()).slice(-2);
                const seconds = ('0' + now.getSeconds()).slice(-2);

                const checkTime = year + "-" + month + "-" + day + "T" + hours + ":" + minutes + ":" + seconds;
                const time = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds;
                this.StudentCheckWorkDTO.checkTime = checkTime;
                this.StudentCheckWorkDTO.checkType = type;
                this.StudentCheckWorkDTO.username = this.studentInfo.username;
                this.$confirm("您打卡的时间是:" + time + " 是否要打卡?", "打卡", {type: 'info'}).then(() => {
                    //确认打卡
                    axios.put("/student/checkWork", this.StudentCheckWorkDTO).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success("打卡成功")
                        } else if (res.data.code === 400) {
                            this.$message.info("未到打卡时间,请稍后再试")
                        } else {
                            this.$message.error("出现未知错误")
                        }
                        this.getStudentCheckWorkInfo()
                    }).catch(res => {
                        this.$message.error("请求错误")
                    })
                }).catch(() => {
                    //取消打卡
                    this.$message.info("打卡已取消")
                });
            },
            //获取学生信息
            getStudentInfo() {
                axios.get("/student/userInfo").then((res) => {
                    if (res.data.code === 200) {
                        this.studentInfo = res.data.data;
                    }
                }).catch((res) => {
                    this.$message.error(res.data.msg)
                })
                return true;
            },
            //获取学生打卡信息
            getStudentCheckWorkInfo() {
                console.log("studentPageDTO  "+JSON.stringify(this.studentPageDTO))
                axios.post("/student/getPage", this.studentPageDTO).then(res => {
                    if (res.data.code === 200) {
                        this.studentPageVo = res.data.data.list;
                        this.total = res.data.data.total;
                    }
                    else if (res.data.code === 400) {
                        this.$message.info("该条件暂无数据")
                    }
                }).catch(res => {
                    this.$message.error("分页请求错误")
                })
            },
            //页码改变
            handlePageChange(currentPage) {
                this.studentPageDTO.pageNum = currentPage
                this.getStudentCheckWorkInfo()
            },
            //每页条数改变
            handleSizeChange(pageSize) {
                this.studentPageDTO.pageSize = pageSize
                this.getStudentCheckWorkInfo()
            }
        },
        created() {
            this.getStudentInfo()
            this.getStudentCheckWorkInfo()
        },
    })
</script>
</html>